<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订票</title>
    <link rel="stylesheet" href="./css/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/layer/css/layer.css">
    <link rel="stylesheet" href="./css/bootstrap-table/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="./css/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="./css/bootstrapvalidator/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="./css/select2/css/select2.min.css">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/layer/js/layer.js"></script>
    <script src="./js/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
    <script src="./js/bootstrap3/js/bootstrap.min.js"></script>
    <script src="./js/select2/js/select2.min.js"></script>
    <script src="./js/select2/js/i18n/zh-CN.js"></script>
    <script src="./js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script src="./js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="./js/bootstrap-table/js/bootstrap-table.min.js"></script>
    <script src="./js/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
    <script src="./js/bootstrap-table/js/tableExport.js"></script>
    <script src="./js/bootstrap-table/js/bootstrap-table-export.js"></script>

    <style>
        body {
            background: url("./img/cd_banner.png") no-repeat center center #042361;
            background-size: cover;
            background-attachment: fixed;
        }

        .table {
            color: snow
        }

        .nav {
            position: fixed;
            top: 10px;
            left: 30px;
            z-index: 1000;
        }

        .nav a {
            text-decoration: none;
            color: yellow;
            padding: 10px
        }

        .mt {
            margin-top: 50px;
            color: snow;

        }

        .table > tbody > tr:hover {
            color: black;
        }

        label.col-md-2.control-label.col-md-offset-2 {
            color: black;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="nav">
        <a href="./index.html">首页</a>
        <a href="./tickets.html">门票管理</a>
        <a href="#">订票</a>
    </div>
    <div class="bootstrap-table mt">
        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
        <table id="tab">

        </table>
    </div>
    <!--        模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">订单添加</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="form">
                        <div class="form-group">
                            <label for="" class="col-md-2 control-label col-md-offset-2">姓名</label>
                            <div class="col-md-4">
                                <input type="text" placeholder="请输入姓名" class="form-control" id="name" name="name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-2 control-label col-md-offset-2">身份证号</label>
                            <div class="col-md-4">
                                <input class="form-control"  type="text" name="idCard" id="idCard"
                                       placeholder="请输入你的身份证号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-2 control-label col-md-offset-2">比赛</label>
                            <div class="col-md-4">
                                <select id="mySelect02">
                                </select>
                                <input type="hidden" name="tids" id="tids">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="add">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    $(function () {
        $("#tab").bootstrapTable({
            toolbar: "#toolbar",
            showButtonIcons: true,
            singleSelect: true,
            classes: ["table", "table-borderless", "table-hover"],
            theadClasses: "thead-light",
            search: true,
            pagination: true,
            pageSize: 10,
            pageList: [5, 10, 15, 20],
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,
            showToggle: true,
            uniqueId: "ID",
            ajax: function (request) {
                $.ajax({
                        type: "GET",
                        url: "/order?method=findAll",
                        dateType: "json",
                        success: function (data) {
                            request.success({
                                row: data
                            });
                            console.log(data);
                            $('#tab').bootstrapTable('load', data);
                        }
                    }
                )
            },
            columns: [
                {
                    checkbox: true,
                },
                {
                    field: "id",
                    title: "序号",
                    formatter: function (value, row, index) {
                        return index + 1;
                    }

                }, {
                    field: "oid",
                    title: "订单编号"

                }, {
                    field: "tickets.tname",
                    title: "赛事",
                }, {
                    field: "tickets.beginTime",
                    title: "开始时间",
                }, {
                    field: "user.name",
                    title: "姓名",
                }, {
                    field: "user.idCard",
                    title: "身份证号"

                }, {
                    field: "orderCount",
                    title: "剩余数量",
                    formatter: function (value, row, index) {
                        return row.tickets.totalCount - row.tickets.orderCount;
                    }
                }, {
                    field: "tickets.price",
                    title: "票价",
                }, {
                    field: "stadia.sname",
                    title: "体育馆",
                }],
            showExport: true,       //显示导出按钮
            exportDataType: "all",      //导出数据类型，三种：
            exportTypes: ['excel', 'xlsx'],	    //导出类型，basic', 'all', 'selected'
            //exportButton: $('#btn_export'),     //为按钮btn_export  绑定导出事件  自定义导出按钮(可以不用)
            exportOptions: {
                //ignoreColumn: [0,0],            //忽略某一列的索引
                fileName: '数据导出',              //文件名称设置
                worksheetName: '门票',          //表格工作区名称
                tableName: '门票数据',
                excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
            }
        });
        /*删除功能*/
        $("#btn_delete").click(function (data) {
            let list = $("#tab").bootstrapTable("getSelections");
            let oid = null;
            if (list.length < 1) {
                layer.msg("请勾选要删除的订单！", {icon: 7});
            } else {
                oid = list[0].oid;
                layer.confirm("确定删除此门票信息？", {btn: ["确定", "取消"], icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        url: "/order?method=delete",
                        type: "get",
                        data: {oid: oid},
                        traditional: true,
                        success: function (data) {

                            if (data.flag) {
                                layer.msg("删除成功", {icon: 6, time: 1000});
                                $("#tab").bootstrapTable("refresh");
                            } else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        },
                        error: function (data) {
                            layer.msg("删除失败", {icon: 5});
                        }
                    })
                });
            }
        });
        formValidator();
        $("#myModal").on("hidden.bs.modal", function () {
            //重置表单
            $("#form").get(0).reset();
            //移除上次的校验配置
           $("#form").data('bootstrapValidator').destroy();
           $('#form').data('bootstrapValidator', null);
            formValidator();
        });
        /*非空校验*/
        /*校验*/
        //form验证规则
        function formValidator() {
            $("#form").bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                excluded:[":disabled"],
                fields: {
                    name: {
                        message: "姓名输入有误",
                        validators: {
                            notEmpty: {
                                message: "姓名不能为空",
                            }
                        }
                    },
                    idCard: {
                        message: "身份证输入有误",
                        validators: {
                            notEmpty: {
                                message: '身份证不能为空'
                            },
                            regexp: { //正则表达式
                                // 身份证号码为15位或者18位，15位时全为数字，
                                // 18位前17位为数字，最后一位是校验位，可能为数字或字符X
                                regexp: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(X|x)$)/,
                                message: '身份证格式不正确'
                            },
                        }
                    },
                    tids: {
                        trigger:"change", //关键配置
                        validators: {
                            notEmpty: {
                                message: "请选择比赛",
                            },
                        }
                    }

                },

            });
        }
        /*加载比赛下拉列表*/
        $.ajax({
            type: "GET",
            url: "/ticket?method=findAll",
            success: function (data) {
                datas = data;
                var dataArray = [];
                $.each(datas, function (i, val) {
                    dataArray.push({id: val.tid, text: val.tname});
                });
                console.log(dataArray);

                $("#mySelect02").select2({
                    language: "zh-CN",
                    placeholder: "请选择赛事",
                    width: 200,
                    allowClear: true,
                    multiple: true,
                    data: dataArray
                })
            }
        });
        /*增加订单功能*/
        $("#btn_add").click(function () {

            /*显示模态框*/
            $('#myModal').modal('show');
            /*清空select2*/
            $('#mySelect02').val(null).trigger('change');//position为自己的select控件的id值
            /*确定添加*/
            $("#add").unbind();
            $("#add").click(function () {
                //向隐藏input中赋值
                var tids = $("#mySelect02").select2("val");
                console.log(tids);
               $("#tids").val(tids).change();
                $("#form").bootstrapValidator('validate');//提交验证

                if ($("#form").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
                    //关闭模态框
                    $("#myModal").modal("hide");
                    //校验通过，提交表单
                    $.ajax({
                        type: "get",
                        url: "/order?method=add",
                        data: $("#form").serialize(),
                        success: function (data) {
                            if (data.flag) {
                                layer.msg("添加成功", {icon: 6, time: 1000});
                                $("#tab").bootstrapTable('refresh');
                            }
                        },
                        error: function () {
                            layer.msg("添加失败", {icon: 5});
                        }
                    })
                }
            })
        });
    })
</script>
</body>
</html>